<template>
	<view>
		<view>
			<table-title content="停车卡申请表"></table-title>
			<view>
				<small-title content="基本资料"></small-title>
				<view class="item-table">
					<view-item name="申请人" :value="userMsg.userName"></view-item>
					<view-item name="手机号码" :value="userMsg.userPhone"></view-item>
					<view-item name="租户名称" :value="userMsg.userCompany"></view-item>
					<view-item name="楼盘" :value="userMsg.userBuilding" :isLast="true"></view-item>
				</view>
			</view>
			<view v-for="(n,index) in number" :key="index">
				<small-title content="车辆信息"></small-title>
				<view class="item-table">
					<input-item typeMsg="车主" @getValue="setCarOwner(index,$event)"></input-item>
					<input-item typeMsg="车牌号" @getValue="setCarNumber(index,$event)"></input-item>
					<view class="picker-bar">
						<view class="picker-name">车位类型</view>
						<view style="height: 100rpx;">
							<picker mode="selector" :value="pickerIndex[index]" :range="parkingSpace[index]" 
								@change="pickerChange(index,$event)">
							<view class="picker-content">
								{{ parkingSpace[index][pickerIndex[index]] }}
							</view>
							</picker>
						</view>
					</view>
				</view>
				<view style="display: flex;margin-top: 10rpx;">
					<view class="picture-block">
						<image v-if="hasPicture[index][0]" src="@/static/delete-logo.svg" class="wrong-logo"
							@click="deletePicture(0,index)"></image>
						<image v-if="!hasPicture[index][0]" src="@/static/add-logo.svg" class="picture-style"
							@click="addPicture(0,index)"></image>
						<image v-if="hasPicture[index][0]" :src="imageUrl[index][0]" class="picture-style"
							@click="previewPicture(0,index)"></image>
						<view class="picture-note">行驶证</view>
						<yq-avatar @upload="uploadPicture" :ref="'avatar'+index"></yq-avatar>
					</view>
					<view class="picture-block">
						<image v-if="hasPicture[index][1]" src="@/static/delete-logo.svg" class="wrong-logo"
							@click="deletePicture(1,index)"></image>
						<image v-if="!hasPicture[index][1]" src="@/static/add-logo.svg" class="picture-style"
							@click="addPicture(1,index)"></image>
						<image v-if="hasPicture[index][1]" :src="imageUrl[index][1]" class="picture-style"
							@click="previewPicture(1,index)"></image>
						<view class="picture-note">驾驶证</view>
						<yq-avatar @upload="uploadPicture" :ref="'avatar'+index"></yq-avatar>
					</view>
					<view class="picture-block">
						<image v-if="hasPicture[index][2]" src="@/static/delete-logo.svg" class="wrong-logo"
							@click="deletePicture(2,index)"></image>
						<image v-if="!hasPicture[index][2]" src="@/static/add-logo.svg" class="picture-style"
							@click="addPicture(2,index)"></image>
						<image v-if="hasPicture[index][2]" :src="imageUrl[index][2]" class="picture-style"
							@click="previewPicture(2,index)"></image>
						<view class="picture-note">车辆交强险</view>
						<yq-avatar @upload="uploadPicture" :ref="'avatar'+index"></yq-avatar>
					</view>
				</view>
				<view style="display: flex;margin-top: 10rpx;">
					<view class="picture-block">
						<image v-if="hasPicture[index][3]" src="@/static/delete-logo.svg" class="wrong-logo"
							@click="deletePicture(3,index)"></image>
						<image v-if="!hasPicture[index][3]" src="@/static/add-logo.svg" class="picture-style"
							@click="addPicture(3,index)"></image>
						<image v-if="hasPicture[index][3]" :src="imageUrl[index][3]" class="picture-style"
							@click="previewPicture(3,index)"></image>
						<view class="picture-note">身份证正面</view>
						<yq-avatar @upload="uploadPicture" :ref="'avatar'+index"></yq-avatar>
					</view>
					<view class="picture-block">
						<image v-if="hasPicture[index][4]" src="@/static/delete-logo.svg" class="wrong-logo"
							@click="deletePicture(4,index)"></image>
						<image v-if="!hasPicture[index][4]" src="@/static/add-logo.svg" class="picture-style"
							@click="addPicture(4,index)"></image>
						<image v-if="hasPicture[index][4]" :src="imageUrl[index][4]" class="picture-style"
							@click="previewPicture(4,index)"></image>
						<view class="picture-note">身份证反面</view>
						<yq-avatar @upload="uploadPicture" :ref="'avatar'+index"></yq-avatar>
					</view>
					<view class="picture-block">
						<image v-if="hasPicture[index][5]" src="@/static/delete-logo.svg" class="wrong-logo"
							@click="deletePicture(5,index)"></image>
						<image v-if="!hasPicture[index][5]" src="@/static/add-logo.svg" class="picture-style"
							@click="addPicture(5,index)"></image>
						<image v-if="hasPicture[index][5]" :src="imageUrl[index][5]" class="picture-style"
							@click="previewPicture(5,index)"></image>
						<view class="picture-note">其他</view>
						<yq-avatar @upload="uploadPicture" :ref="'avatar'+index"></yq-avatar>
					</view>
				</view>
			</view>
			<button class="add-button" @click="addNumber()">+</button>
			<view>
				<small-title content="费用总计"></small-title>
				<view style="display: flex;flex-direction: column;width: 650rpx;">
					<view class="cost-item">
						<view class="cost-name">VIP车位</view>
						<view class="cost-value">￥{{ vipCost }}</view>
					</view>
					<view class="cost-item" style="margin-top: 40rpx;">
						<view class="cost-name">字母车位</view>
						<view class="cost-value">￥{{ charactarCost }}</view>
					</view>
					<view class="cost-item" style="margin-top: 40rpx;">
						<view class="cost-name" style="font-weight: 700;">总计</view>
						<view class="cost-value" style="font-weight: 700;">￥{{ totalCost }}</view>
					</view>
				</view>
			</view>
			<view>
				<small-title content="上传付款凭证"></small-title>
				<view class="picture-block">
					<image v-if="hasPayment[0]" src="@/static/delete-logo.svg" class="wrong-logo"
						@click="deletePayment"></image>
					<image v-if="!hasPayment[0]" src="@/static/add-logo.svg" class="picture-style"
						@click="addPayment(0)"></image>
					<image v-if="hasPayment[0]" :src="paymentImgUrl[0]" class="picture-style"
						@click="previewPayment(0)"></image>
					<yq-avatar @upload="uploadPayment" ref="payAvatar"></yq-avatar>
				</view>
			</view>
			<view>
				<small-title content="开票信息"></small-title>
				<radio-group class="invoice-group" @change="chooseInvoiceType">
					<label class="invoice-choice">
						<radio value="person" :checked="personFlag"></radio>
						<view>个人</view>
					</label>
					<label class="invoice-choice">
						<radio value="company"></radio>
						<view>单位</view>
					</label>
				</radio-group>
				<view class="item-table" v-if="companyFlag">
					<input-item typeMsg="发票抬头" :isLast="false" @getValue="setInvoiceHead"></input-item>
					<input-item typeMsg="税号" @getValue="setCompanyTaxNumber"></input-item>
					<input-item typeMsg="开户银行" :isEmpty="true" @getValue="setCompanyBank"></input-item>
					<input-item typeMsg="银行账号" :isEmpty="true" @getValue="setCompanyBankAccount"></input-item>
					<input-item typeMsg="企业地址" :isEmpty="true" @getValue="setCompanyAddress"></input-item>
					<input-item typeMsg="企业电话" :isLast="true" :isEmpty="true" @getValue="setCompanyPhone"></input-item>
				</view>
				<view class="item-table" v-if="personFlag" >
					<input-item typeMsg="发票抬头" :isLast="true" @getValue="setInvoiceHead"></input-item>
				</view>
			</view>
			<button class="confirm-button" @click="submit">确认</button>
			<view style="height: 200rpx;"></view>
		</view>
		<u-tabbar v-model="current" :list="list" :before-switch="clickTabbar"></u-tabbar>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				vipCost: 100,
				charactarCost: 80,
				totalCost: 100,
				// totalCost: this.getTotalPrice,
				rowNumber: 0,
				pickerIndex: [0,0],
				number : 2,
				parkingSpace: [
					['字母车位','VIP车位','其他'],
					['字母车位','VIP车位','其他']
				],
				hasPicture:[
					[false,false,false,false,false,false],
					[false,false,false,false,false,false]
				],
				imageUrl:[
					['','','','','',''],
					['','','','','','']
				],
				applyMsg:[
					{'carOwner':'','carNumber':''},
					{'carOwner':'','carNumber':''}
				],
				hasPayment: [false],
				paymentImgUrl: [''],
				personFlag: true,
				companyFlag: false,
				userMsg: {
					'userName':'','userPhone':'','userCompany':'','userId':'123','userBuilding':''
				},
				companyInvoiceMsg:{
					'invoiceHead':'','taxNumber':'','bankName':'','bankAccount':'',
					'companyAddress':'','companyPhone':''
				},
				personalInvoiceMsg:{
					'invoiceHead':''
				},
				list: [
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '楼层管家',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发现',
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '消息',
						count: 23,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
					},
				],
				current: 0
			}
		},
		methods: {
			// getTotalPrice() {
			// 	let totalPrice = 0
			// 	for(let i=0; i < this.parkingSpace.length; i++){
			// 		switch(this.parkingSpace[i][this.pickerIndex[i]]){
			// 			case '字母车位':
			// 				totalPrice = totalPrice + this.charactarCost
			// 				break
			// 			case 'VIP车位':
			// 				totalPrice = totalPrice + this.vipCost
			// 				break
			// 		}
			// 	}
			// 	return totalPrice 
			// },
			uploadPicture(rsp) {
			    this.$set(this.imageUrl[this.rowNumber], rsp.index, rsp.path);
			},
			uploadPayment(rsp) {
			    this.$set(this.paymentImgUrl, rsp.index, rsp.path);
			},
			addPicture(e,index) {
				let rowNumberTmp = this.rowNumber
				rowNumberTmp = index
				this.rowNumber = rowNumberTmp
				let tmp = [...this.hasPicture]
				tmp[index][e] = true
				this.hasPicture = tmp
				let refName = 'avatar' + index
				console.log(this.$refs[`avatar${index}`][e])
				this.$refs[`avatar${index}`][e].fChooseImg((index,e),{
				    selWidth: "640upx", selHeight: "400upx",
				    expWidth: '640upx', expHeight: '400upx'
				});
			},
			addPayment(index) {
				let tmp = [...this.hasPayment]
				tmp[index] = true
				this.hasPayment = tmp
				this.$refs.payAvatar.fChooseImg(index,{
				    selWidth: "640upx", selHeight: "400upx",
				    expWidth: '640upx', expHeight: '400upx'
				});
			},
			previewPicture(e,index){
				uni.previewImage({
					urls:this.imageUrl[index].slice(e,e+1),
					longPressActions:{
						itemList:['发送给朋友','保存图片','收藏']
					}
				})
			},
			previewPayment(e){
				uni.previewImage({
					urls:this.paymentImgUrl.slice(e,e+1),
					longPressActions:{
						itemList:['发送给朋友','保存图片','收藏']
					}
				})
			},
			chooseInvoiceType(e){
				if(e.detail.value==='person'){
					this.personFlag = true
					this.companyFlag = false
				}else if(e.detail.value==='company'){
					this.companyFlag = true
					this.personFlag = false
				}
			},
			addNumber(){
				this.number++
				let tmp = [...this.hasPicture]
				let imgTmp = [...this.imageUrl]
				let applyTmp = [...this.applyMsg]
				let newApply = [{'carOwner':'','carNumber':''}]
				let newTmp = [[false,false,false,false,false,false]]
				let newImgTmp = [['','','','','','']]
				applyTmp = [...applyTmp,...newApply]
				tmp = [...tmp,...newTmp]
				imgTmp = [...imgTmp,...newImgTmp]
				this.hasPicture = tmp
				this.imageUrl = imgTmp
				this.applyMsg = applyTmp
			},
			setCarOwner(index,e){
				this.applyMsg[index].carOwner = e
				console.log(this.applyMsg)
			},
			setCarNumber(index,e){
				this.applyMsg[index].carNumber = e
				console.log(this.applyMsg)
			},
			setInvoiceHead(e){
				this.personalInvoiceMsg.invoiceHead = e
				this.companyInvoiceMsg.invoiceHead = e
			},
			setCompanyTaxNumber(e){
				this.companyInvoiceMsg.taxNumber = e
			},
			setCompanyBank(e){
				this.companyInvoiceMsg.bankName = e
			},
			setCompanyBankAccount(e){
				this.companyInvoiceMsg.bankAccount = e
			},
			setCompanyAddress(e){
				this.companyInvoiceMsg.companyAddress = e
			},
			setCompanyPhone(e){
				this.companyInvoiceMsg.companyPhone = e
				console.log(this.personalInvoiceMsg)
				console.log(this.companyInvoiceMsg)
			},
			deletePicture(e,index){
				let tmp = [...this.hasPicture]
				let imgTmp = [...this.imageUrl]
				imgTmp[index][e] = ''
				tmp[index][e] = !tmp[index][e]
				this.hasPicture = tmp
				this.imageUrl = imgTmp
			},
			deletePayment(){
				let tmp = [...this.hasPayment]
				let imgTmp = [...this.paymentImgUrl]
				imgTmp[0] = ''
				tmp[0] = false
				this.hasPayment = tmp
				this.paymentImgUrl = imgTmp
			},
			pickerChange(index,e){
				console.log(e)
				let pickerIndexTmp = [...this.pickerIndex]
				pickerIndexTmp[index] = e.target.value
				this.pickerIndex = pickerIndexTmp
			},
			submit(){
				uni.request({
					url:'http://192.168.3.165:8080/jeecg-boot/parkingcard/bobangParkingcardApply/add',
					method:'POST',
					header:{
						'Content-Type' : 'raw',
					},
					data:{
						'billing':{
							"bankNumber": this.companyInvoiceMsg.bankAccount,
							"billingBank": this.companyInvoiceMsg.bankName,
							"billingTitle": this.companyInvoiceMsg.invoiceHead,
							"companyAddress": this.companyInvoiceMsg.companyAddress,
							"companyPhone": this.companyInvoiceMsg.companyPhone,
							"invoiceTypeValue": this.personFlag ? '0' : '1',
							"moduleTypeValue": "0",
							"tfn": this.companyInvoiceMsg.taxNumber
						}
					}
				})
				// uni.navigateTo({
				// 	url:'../history/history'
				// })
			},
			clickTabbar(index) {
				switch(index){
					case 0:
						console.log('首页')
						uni.redirectTo({
							url:'/pages/home/home'
						})
						return true
						break
					case 1:
						console.log('楼层管家')
						return true
						break
					case 2:
						console.log('发现')
						return true
						break
					case 3:
						console.log('消息')
						uni.redirectTo({
							url:'/pages/systemAnnoucement/list/list'
						})
						return true
						break
					case 4:
						console.log('我的')
						uni.navigateTo({
							url:'/pages/myPage/myPage'
						})
						return true
						break
				}
			}
		},
		mounted() {
			uni.request({
				url:'http://192.168.3.172:3000/mock/27/v1/queryTenantAccountById',
				method:'GET',
				header:{
					'Content-Type' : 'application/x-www-form-urlencoded'
				},
				data:{
					'id' : this.userMsg.userId
				},
				success: (res) => {
					this.userMsg.userName = res.data.result.owner_name
					this.userMsg.userPhone = res.data.result.owner_phone
					this.userMsg.userCompany = res.data.result.tenant_name
					this.userMsg.userBuilding = res.data.result.building_name
				}
			})
			uni.request({
				url:'http://192.168.3.165:8080/jeecg-boot/parkingcard/bobangParkingcardPrice/getPrice',
				method:'GET',
				header:{
					'Content-Type' : 'application/x-www-form-urlencoded'
				},
				data:{
					'carportType' : '0',
					'tenantId' : this.userMsg.userId
				},
				success: (res) => {
					console.log(res)
					this.vipCost = res.data.result
					this.charactarCost = res.data.result
					console.log(this.vipCost)
				}
			})
		}
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.confirm-button{
		background-color: #007AFF;
		color: #FFFFFF;
		width: 650rpx;
		margin-top: 50rpx;
		border-radius: 50rpx;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.picture-part{
		display: flex;
		margin: 0 0 10rpx 0;
		font-size: 100rpx;
		font-weight: 200;
		align-items: center;
		justify-content: center;	
		width: 170rpx;
		height: 170rpx;
		border: dashed 1rpx #000000;
	}
	.picture-style{
		width: 170rpx;
		height: 170rpx;
		margin: 0 0 10rpx 0rpx;
	}
	.picture-note{
		width: 170rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.picture-block{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 60rpx;
	}
	.invoice-group{
		display: flex;
		align-items: center;
		height: 80rpx;
	}
	.invoice-choice{
		display: flex;
		margin-left: 50rpx;
	}
	.add-button{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-weight: 1000;
		font-size: 50rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #ffffff;
	}
	.add-button::after{
		border: none;
	}
	.wrong-logo{
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -40rpx;
		margin-left: 130rpx;
		z-index: 999;
		background-color: #555555
	}
	.picker-bar{
		height: 100rpx;
		display: flex;
		width: 652rpx;
	}
	.picker-name{
		width: 200rpx;
		display: flex;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
		border-right: none;
	}
	.picker-content{
		background-color: #FFFFFF;
		width: 450rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: solid 1rpx #C0C0C0;
		border-left: none;
	}
	.cost-item{
		display: flex;
		margin-left: 100rpx;
	}
	.cost-name{
		display: flex;
		align-items: flex-start;
		width: 450rpx;
	}
	.cost-value{
		display: flex;
		align-items: flex-end;
		width: 100rpx;
	}
</style>
